$badge: $prefix + 'badge';

.#{$badge} {
    @apply whitespace-nowrap text-xs font-medium px-2.5 py-0.5 rounded;

    &-color-default {
        @apply bg-gray-100 text-gray-800 dark:text-gray-300 dark:bg-gray-700;
    }

    @each $key, $value in $colors {
        &-color-#{$key} {
            @apply bg-#{$value}-100 text-#{$value}-800 dark:bg-#{$value}-900 dark:text-#{$value}-300;
        }
    }
}